$codelist-color-setting: (
  // Spacing
  spacing-content-padding: getCssVar(spacing, base),
  spacing-footer-padding: getCssVar(spacing, base),
  spacing-collapse-item-padding: 0 getCssVar(spacing, base),
  // Font
  font-content-font-size: getCssVar(font-size, regular)
);

@include b(codelist-color-setting) {
  @include set-component-css-var(
    'codelist-color-setting',
    $codelist-color-setting
  );

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  @include e(content) {
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;

    .el-collapse {
      --el-collapse-header-font-size: #{getCssVar(
          codelist-color-setting,
          font-content-font-size
        )};
      --el-collapse-content-font-size: #{getCssVar(
          codelist-color-setting,
          font-content-font-size
        )};
    }
  }

  @include e(footer) {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
  }

  @include e(collapse-item) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: getCssVar(codelist-color-setting, spacing-collapse-item-padding);
  }
}
